<template>
  <div class="relative-full">
    <div class="for-bg">
      <div class="circle-bg bg1"></div>
      <div class="circle-bg bg2"></div>
      <div class="rectangle-bg bg3"></div>
      <div class="circle-bg bg4"></div>
    </div>
    <vue-scroll>
      <div class="relative-full article-search-container">
        <div class="article-search-head">
          <input type="text" v-model="key" class="article-search-input" @change="keyHasChange=true">
          <button class="article-search-btn" @click="handleSearchBtn">搜 索</button>
        </div>
        <div class="article-search-condition">
          <div class="category-filter">
            <div class="condition-wrapper">
              <div class="cf-left f-y-center">
                <img @mouseenter="resetCategory=true"
                     @mouseleave="resetCategory=false"
                     @click="handleResetCategory"
                     slot="reference"
                     class="wh30"
                     src="/image/others/puzzle-1.1s-47px.svg"
                     :class="{'ld':resetCategory,
                   'ld-tremble':resetCategory}"
                     ref="categoryFilterIcon"
                     alt="">
                <span style="margin-left: 8px">分类</span>
              </div>
              <span class="filter-item category-item"
                    :class="{'active':categorySelected&&categorySelected._id===v._id}"
                    v-for="v in category"
                    :key="v._id"
                    @click="selectCategory(v)">
                {{ v.name }}
              </span>
            </div>
          </div>

          <div class="sort-filter">
            <div class="condition-wrapper">
              <div class="cf-left f-y-center">
                <img @mouseenter="resetSort=true"
                     @mouseleave="resetSort=false"
                     @click="handleResetSort"
                     class="wh30"
                     src="/image/others/bar-1.1s-47px.svg"
                     :class="{'ld':resetSort,
                   'ld-tremble':resetSort}"
                     ref="sortFilterIcon"
                     alt="">
                <span style="margin-left: 8px">排序</span>
              </div>
              <span class="filter-item sort-item"
                    :class="{'active':sortSelected&&sortSelected.key===v.key,
                  'asc':v.value===1,
                  'desc':v.value===-1}"
                    v-for="v in sort"
                    :key="v.key"
                    @click="selectSort(v)">
                {{ v.name }}
            </span>
            </div>
          </div>
        </div>

        <div class="hr"></div>
        <div style="margin: 20px 24px">
          <div v-for="article in articles"
               :key="article._id"
               class="search-result-item"
          >
          <span class="sri-title" @click="readMore(article)"><a href="javascript:void(0)">{{ article.title }}</a>
          </span>
            <!--          <div class="article-meta">-->
            <!--            <a href="#"><span-->
            <!--                class="iconfont  icon-time"></span><span>{{ article.createTime.split('.')[0].split('T')[0] }}</span></a>-->
            <!--            <a href="#"><span-->
            <!--                class="iconfont  icon-mine"></span><span>{{ article.author ? article.author : 'Daisy' }}</span></a>-->
            <!--            <a href="#"><span class="iconfont  icon-message"></span>{{-->
            <!--                article.numberOfComment ? article.numberOfComment : 0-->
            <!--              }}<span></span></a>-->
            <!--          </div>-->
          </div>
        </div>
        <paginate
            v-model="pagination.page"
            :page-count="pagesComputed"
            prev-text='<i class="fa fa-chevron-left" aria-hidden="true"></i>'
            next-text='<i class="fa fa-chevron-right" aria-hidden="true"></i>'
            :click-handler="searchArticle"
            :container-class="'ml-pagination'"
            :page-class="'ml-page-item'"
        >
        </paginate>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { GetArticle, GetArticleCount } from '@/api/blog-api'

const PUBLISHED = 1
const PAGE_SIZE = 10
export default {
  name: 'Article',
  data () {
    return {
      keyHasChange: false,
      articles: [],
      key: '',
      // 1为升序 -1为降序
      sort: [
        { key: 'createTime', name: '时间', value: 1 },
        { key: 'comments', name: '评论', value: 1 },
        { key: 'viewNum', name: '浏览', value: 1 },
      ],
      pagination: { page: 1, limit: PAGE_SIZE },
      articleCount: 0,
      categorySelected: null,
      sortSelected: null,
      resetCategory: false,
      resetSort: false,
    }
  },
  computed: {
    ...mapState('daisy/blog', [
      'category', 'hotTag'
    ]),
    pagesComputed () {
      let pages = 1
      if (this.articleCount) {
        pages = Math.ceil(this.articleCount / this.pagination.limit)
      }
      return pages
    }
  },
  created () {
    if (this.$route.query.key) {
      this.key = this.$route.query.key
    }
    if (this.$route.query.category) {
      this.category.some(c => {
        if (c.name === this.$route.query.category) {
          this.categorySelected = c
          return true
        }
      })
    }
    (this.key || this.categorySelected) && this.searchArticle()
  },
  mounted () {
    if (window.tippy) {
      window.tippy(this.$refs.categoryFilterIcon, {
        content: '重置分类',
        offset: [0, 4]
      })

      window.tippy(this.$refs.sortFilterIcon, {
        content: '重置排序',
        offset: [0, 4]
      })
    }
  },
  methods: {
    readMore (article) {
      this.$router.push({
        path: '/article/' + article._id
      })
    },
    selectCategory (category) {
      if (!this.categorySelected || category._id !== this.categorySelected._id) {
        this.categorySelected = category
        this.initPagination()
        this.searchArticle()
      }
    },

    selectSort (sort) {
      if (!this.sortSelected || sort.key !== this.sortSelected.key) {
        this.sortSelected = sort
      } else {
        this.sortSelected.value = this.sortSelected.value === 1 ? -1 : 1
      }
      this.searchArticle()
    },

    handleResetCategory () {
      this.categorySelected = null
      this.initPagination()
      this.searchArticle()
    },

    handleResetSort () {
      this.sortSelected = null
      this.searchArticle()
    },

    handleSearchBtn () {
      console.log(this.keyHasChange)
      this.keyHasChange && this.searchArticle()
    },

    searchArticle () {
      this.loading = true
      setTimeout(() => {
            let query = { ...this.pagination, published: PUBLISHED, }
            this.initQueryParams(query)
            // 这边排序得单独处理了
            if (this.sortSelected) {
              query.sort = this.sortSelected.key
              query.asc = this.sortSelected.value
            }
            GetArticle(query).then(res => {
              this.articles = res.data
            }).catch(err => {
              console.log(err)
            })
          },
          200)
    },

    initPagination () {
      this.pagination = {
        page: 1,
        limit: PAGE_SIZE
      }
      this.articleCount = 0
      let query = { published: PUBLISHED }
      this.initQueryParams(query)
      GetArticleCount(query).then(res => {
        this.articleCount = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    initQueryParams (query) {
      if (this.key) {
        const pattern = /[\\\[\]\/?\s]/g;
        query.key = this.key.replace(pattern, "");
      }
      if (this.categorySelected) {
        query.category = this.categorySelected.name
      }
    }
  },
}
</script>

<style>
.for-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.circle-bg {
  position: absolute;
  border-radius: 50%;
}

.bg1 {
  top: 90px;
  right: 10%;
  width: 140px;
  height: 140px;
  background-color: rgba(255, 223, 166, 0.77);
  animation: bgAnimate 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.bg2 {
  top: 190px;
  right: 11%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 192, 67, 0.67);
  animation: bgAnimate 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.bg4 {
  top: 42%;
  right: 50%;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 213, 221, 0.65);
  animation: bgAnimate 7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.bg3 {
  transform: rotate(45deg);
  bottom: 30%;
  left: 10%;
  width: 80px;
  height: 80px;
  background-color: rgba(201, 144, 254, 0.5);
  animation: bgAnimate 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.rectangle-bg {
  position: absolute;
  border-radius: 20px;
}

.article-search-container {
  padding-bottom: 20px;
}

.article-search-head {
  display: flex;
  height: 44px;
  margin: 40px 30px 0;
  background-color: white;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  border-radius: 25px;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  z-index: 1;
}

.article-search-input {
  flex: 1;
  padding-left: 24px;
  background: #FFFFFF;
  color: #535353;
  font-size: 14px;
  overflow: hidden;
}

.article-search-btn {
  flex: 0 0 120px;
  font-size: 18px;
  cursor: pointer;
  background-color: #a175ed;
  color: #FFFFFF;
  transition: .2s;
}

.article-search-btn:hover {
  flex: 0 0 140px;
  background-color: rgba(161, 117, 237, 0.85);
}

.article-search-input, .article-search-btn {

  border-radius: 25px;
  border: none;
  outline: none;
}

.article-search-condition {
  margin: 20px 24px 0;
}

.condition-wrapper {
  /*display: flex;*/
  overflow: hidden;
}

.cf-left {
  float: left;
  width: 100px;
  height: 42px;
  font-size: 12px;
  color: #7a7a7a;
}

.cf-left img {
  cursor: pointer;
}

.filter-item {
  position: relative;
  cursor: pointer;
  float: left;
  height: 28px;
  line-height: 25px;
  border: 2px solid transparent;
  border-radius: 14px;
  margin: 8px 14px 10px 0;
  padding: 0 26px;
  color: white;
  transition: .3s;
}

.filter-item.category-item {
  background-color: #a175ed;
}

.filter-item.sort-item {
  background-color: #a175ed;
}

.filter-item:hover, .filter-item.active {
  padding-right: 40px;
}

.filter-item.category-item:hover, .filter-item.category-item.active {
  border: 2px solid #c2a2ff;
  background-color: #9060e2;
}

.filter-item.sort-item:hover, .filter-item.sort-item.active {
  border: 2px solid #c2a2ff;
  background-color: #9060e2;
}

.filter-item::after {
  content: '';
  display: block;
  visibility: hidden;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
}

.filter-item.category-item::after {
  background: url("/image/others/circle2.svg") no-repeat;
  background-size: 100%;
}

.filter-item.sort-item::after {
  transition: .2s;
  background: url("/image/others/up-1.1s-47px1.svg") no-repeat;
  background-size: 100%;
}

.filter-item:hover::after, .filter-item.active::after {
  visibility: visible;
}

.sort-item.asc::after {
  transform: rotate(0deg);
}

.sort-item.desc::after {
  transform: rotate(164deg);
}

.hr {
  margin: 10px 40px;
  height: 2px;
  border-radius: 1px;
  background-color: #ffdfa6;
}

.search-result-item {
  margin: 30px 0;
  padding: 14px;
  border-radius: 8px;
  /*background-color: #e5c8ff;*/
  box-shadow: 0 0 20px 0px #6a6a6a47;
}

.sri-title > a {
  font-size: 16px;
  color: #676767;
}

@keyframes bgAnimate {
  /*animate here,0%可以设置动画的初始状态*/
  0% {
    transform: translateY(0) rotate(45deg);
  }

  50% {
    transform: translateY(14px) rotate(60deg);
  }

  100% {
    transform: translateY(0) rotate(45deg);
  }
}

@media (max-width: 992px) {
  .filter-item {
    padding: 0 16px;
  }

  .filter-item:hover, .filter-item.active {
    padding-right: 30px;
  }

  .article-search-head {
    margin: 30px 20px 0;
  }
}

@media (max-width: 768px) {

}
</style>
